<template>
        <component ref="chartComponet"
                   :config="config"
                   :is="chartComponet"
                   :layoutItem="layoutItem"
                   @setChartComponet="setChartComponet"
                   class="pie-wrap">
        </component>
</template>

<script>
import BarComponent from "../chartComponent/BarComponent"
import LineComponent from "../chartComponent/LineComponent"
import PieComponent from "../chartComponent/PieComponent"
import GaugeComponent from "../chartComponent/GaugeComponent"
import MapComponent from "../chartComponent/MapComponent"
import LineBarComponent from "../chartComponent/LineBarComponent"
import FunnelComponent from "../chartComponent/FunnelComponent"
import RadarComponent from "../chartComponent/RadarComponent"
import CustomChartComponent from "../chartComponent/CustomChartComponent"
import NumericalComponent from "../chartComponent/NumericalComponent.vue"

/**
 *图表展示
 */

export default {
    name: "chart-view",
    props: {
        config: {
            type: Object
        },
        layoutItem:{
          type:Object
        }
    },
    components: {
        BarComponent,
        LineComponent,
        PieComponent,
        GaugeComponent,
        MapComponent,
        LineBarComponent,
        FunnelComponent,
        RadarComponent,
        CustomChartComponent,
        NumericalComponent
    },
    data() {
        return {
            chartComponet:""
        }
    },
    created() {
        this.setChartComponet(this.config);
    },
    methods: {
        setChartComponet(config){
            if(config.reportType){
                this.chartComponet = config.reportType+"Component";
            }
        }
    },
    watch:{
        config:{
            handler: function (val, oldVal) {
                if(val){
                    this.setChartComponet(val);
                }
            },
            deep: true
        }
    }
}
</script>

<style lang='less' scope>
.pie-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid #dadde0;
    background: #fff;
}
</style>